<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
</head>
<body>
    
        <script src="../lib/layui-v2.6.3/layui.js"></script>

        <button class="layui-btn" id="demo1">
            下拉菜单
            <i class="layui-icon layui-icon-down layui-font-12"></i>
          </button>


          <script>
            layui.use('dropdown', function(){
              var dropdown = layui.dropdown
              dropdown.render({
                elem: '#demo1' //可绑定在任意元素中，此处以上述按钮为例
                ,data: [{
                  title: 'menu item 1'
                  ,id: 100
                  ,href: '#'
                },{
                  title: 'menu item 2'
                  ,id: 101
                  ,href: '{{d.root}}/' //开启超链接
                  ,target: '_blank' //新窗口方式打开
                },{type: '-'},{
                  title: 'menu item 3'
                  ,id: 102
                  ,type: 'group'  //菜单类型，支持：normal/group/parent/-
                  ,child: [{
                    title: 'menu item 3-1'
                    ,id: 103
                  },{
                    title: 'menu item 3-2'
                    ,id: 104
                    ,child: [{
                      title: 'menu item 3-2-1'
                      ,id: 105
                    },{
                      title: 'menu item 3-2-2'
                      ,id: 106
                    }]
                  },{
                    title: 'menu item 3-3'
                    ,id: 107
                  }]
                },{type: '-'},{
                  title: 'menu item 4'
                  ,id: 108
                },{
                  title: 'menu item 5'
                  ,id: 109
                  ,child: [{
                    title: 'menu item 5-1'
                    ,id: 11111
                    ,child: [{
                      title: 'menu item 5-1-1'
                      ,id: 2111
                    },{
                      title: 'menu item 5-1-2'
                      ,id: 3111
                    }]
                  },{
                    title: 'menu item 5-2'
                    ,id: 52
                  }]
                },{type:'-'},{
                  title: 'menu item 6'
                  ,id: 6
                  ,type: 'group'
                  ,isSpreadItem: false
                  ,child: [{
                    title: 'menu item 6-1'
                    ,id: 61
                  },{
                    title: 'menu item 6-2'
                    ,id: 62
                  }]
                }]
                ,id: 'demo1'
                //菜单被点击的事件
                ,click: function(obj){
                  console.log(obj);
                  layer.msg('回调返回的参数已显示再控制台');
                }
              });
            });
            </script>





        <div class="layui-inline" style="width: 235px;">
            <input name="" placeholder="在输入框提供一些常用的选项" class="layui-input" id="demo2">
        </div>
        <div class="layui-inline layui-word-aux layui-font-gray">
            可以绑定任意元素，<a href="javascript:;" class="layui-font-blue" id="demo2">比如这段文字 <i class="layui-icon layui-font-12 layui-icon-down"></i></a>
          </div>

          <script>
            layui.use(['dropdown', 'util', 'layer', 'table'], function(){
              var dropdown = layui.dropdown
              ,util = layui.util
              ,layer = layui.layer
              ,table = layui.table
              ,$ = layui.jquery;
               //初演示 - 绑定输入框
                dropdown.render({
                    elem: '#demo2'
                    ,data: [{
                    title: 'menu item 1'
                    ,id: 101
                    },{
                    title: 'menu item 2'
                    ,id: 102
                    },{
                    title: 'menu item 3'
                    ,id: 103
                    },{
                    title: 'menu item 4'
                    ,id: 104
                    },{
                    title: 'menu item 5'
                    ,id: 105
                    },{
                    title: 'menu item 6'
                    ,id: 106
                    }]
                    ,click: function(obj){
                    this.elem.val(obj.title);
                    }
                    ,style: 'width: 235px;'
                });
            })


            </script>
          
    



    
</body>
</html>